<template>
    <div>
        <div id="product-search " class="container" >
            <div class="row">
                <div id="content" class="col-sm-12">
                    <div class="nav-bar">搜索</div>
                    <div class="row widget">
                        <div class="col-xs-12">
                            <div id="search" class="input-group">
                                <input v-model='search_key' type="text" name="search" placeholder="关键字" id="input-search" class="form-control">
                                <input type="hidden" name="category_id" value="0">
                                <input type="hidden" name="sub_category" value="1">
                                <input type="hidden" name="description" value="1">
                                <span class="input-group-btn">
              <input type="button" value="搜索" id="button-search" class="btn btn-primary">
            </span>
                            </div>
                        </div>
                    </div>

                    <div class="row widget category-sort-widget">
                        <div class="col-sm-12">
                            <ul>
                                <li>
                                    <a class="active" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.sort_order&amp;order=ASC&amp;search=s">
                                        默认 <i class="fa fa-level-down"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=pd.name&amp;order=ASC&amp;search=s">
                                        名称 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.price&amp;order=ASC&amp;search=s">
                                        价格 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=rating&amp;order=DESC&amp;search=s">
                                        评级 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                                <li>
                                    <a class="" href="https://mall.opencart.cn/index.php?route=product/search&amp;sort=p.model&amp;order=ASC&amp;search=s">
                                        型号 <i class="fa fa-sort"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div  class="row product-list-item-style product-grid-box">
                        <div v-for='item in goods_list' class="col-xs-6 product-item">
                            <div class="product-item-wrapper">
                                <div class="image">
                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=33&amp;search=s">
                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-14-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-14-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                    </a>
                                    <!--<span class="sales">销量： 100,039</span>-->

                                </div>
                                <div class="info">
                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=33&amp;search=s">
                                        {{item.name}}
                                    </a>
                                    <div class="price">
                                        <span class="price-new">￥{{item.price}}</span>
                                        <!--<span class="price-old">￥788.00</span>-->
                                    </div>

                                    <div class="add-cart" v-on:click="cart_add(item)">
                                        <i class="iconfont"></i>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <!--
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=55&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                    </a>
                                                    <span class="sales">销量： 126</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=55&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                    <div class="price">
                                                        <span class="price-new">￥299.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('55')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>

                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=57&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                    </a>
                                                    <span class="sales">销量： 126</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=57&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                    <div class="price">
                                                        <span class="price-new">￥399.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('57')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=58&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-12-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-12-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                    </a>
                                                    <span class="sales">销量： 126</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=58&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                    <div class="price">
                                                        <span class="price-new">￥499.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('58')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=59&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-b-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-b-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                    </a>
                                                    <span class="sales">销量： 127</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=59&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                    <div class="price">
                                                        <span class="price-new">￥599.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('59')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=60&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-g-228x228.png" class="lazy img-responsive" style="opacity: 1;">
                                                    </a>
                                                    <span class="sales">销量： 127</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=60&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                    <div class="price">
                                                        <span class="price-new">￥699.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('60')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=61&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-1-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                    </a>
                                                    <span class="sales">销量： 133</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=61&amp;search=s">SOMSUNG 存储卡128GB 高速TF卡 Micro SD卡 红色升级版</a>
                                                    <div class="price">
                                                        <span class="price-new">￥0.01</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('61')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=29&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-2-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                    </a>
                                                    <span class="sales">销量： 1,045</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=29&amp;search=s">Sony/索尼 MDR-XB80BS 立体声通话式无线耳机运动</a>
                                                    <div class="price">
                                                        <span class="price-new">￥599.99</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('29')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/product-43-cn?search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-4-r-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                    </a>
                                                    <span class="sales">销量： 141</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/product-43-cn?search=s">Sony/索尼 SRS-XB10 无线蓝牙音箱重低音小钢炮迷你户外小音响</a>
                                                    <div class="price">
                                                        <span class="price-new">￥299.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('43')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=34&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-15-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                    </a>
                                                    <span class="sales">销量： 7,465</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=34&amp;search=s">Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机</a>
                                                    <div class="price">
                                                        <span class="price-new">￥199.00</span> <span class="price-old">￥2,299.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('34')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=41&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-15-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                    </a>
                                                    <span class="sales">销量： 3,651</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=41&amp;search=s">Sony/索尼 WI-H700入耳式无线蓝牙耳机无线通话</a>
                                                    <div class="price">
                                                        <span class="price-new">￥899.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('41')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-xs-6 product-item">
                                            <div class="product-item-wrapper">
                                                <div class="image">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=35&amp;search=s">
                                                        <img data-src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-13-228x228.png" src="https://mall.opencart.cn/image/cache/placeholder-100x100.png" class="lazy img-responsive">
                                                    </a>
                                                    <span class="sales">销量： 2,190</span>

                                                </div>
                                                <div class="info">
                                                    <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=35&amp;search=s">小米米家空气净化器2S家用室内办公智能氧吧除甲醛雾霾粉尘</a>
                                                    <div class="price">
                                                        <span class="price-new">￥899.00</span>
                                                    </div>

                                                    <div class="add-cart" onclick="cart.add('35')"><i class="iconfont"></i></div>

                                                </div>
                                            </div>

                                        </div>
                                        -->
                    </div>



                </div>
            </div>
        </div>
        <footer-nav></footer-nav>


        <div v-show='tips.show' class="layui-layer layui-layer-dialog layui-layer-border
    layui-layer-msg layui-layer-hui"
             id="layui-layer10" type="dialog"
             times="10" showtime="3000" contype="string"
             style="z-index: 19891024; top: 296px; left: 92px;">
            <div id="" class="layui-layer-content">{{tips.message}}</div>
            <span class="layui-layer-setwin"></span>
        </div>

    </div>

</template>

<script>

    import nav from './common/nav';
    export default {

        data: function(){
            return {
                search_key:'',
                    goods_list:[],
                tips: { //提示框
                    show: 0,
                    message: ''
                }
            }
        },
        methods:{

            header2_event:function( data ){

                console.log( 'header2_event:' );
                console.log( data );
            },

            get_header:function(){

            },
            get_list:function(){

                var t = this;
                var url = this.config.web_url + '?r=goods';
                this.axios.get( url )
                    .then(function (res) {
                        t.goods_list = res.data.rows;
                        console.log( t.goods_list );
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            cart_add:function( product ){

                //todo 添加到购物车
                var t = this;
                var url = this.config.web_url + '?r=cart/add';
                url += '&product_id='+product.id+'&number=1';
                this.axios.get( url )
                    .then(function (res) {

                        if( res.data.description ){
                            //todo 显示 购物车添加提示
                            t.tips.message = res.data.description;
                            t.tips.show = 1;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }

        },

        watch:{
            'tips.show':function(){
                console.log('tips show');
                //todo: 提示框定位: 获取屏幕宽度，获取自身宽度， 算出left

                // todo:提示框缓缓消失

            }
        },
        created:function(){

            this.get_list();

        },


        components:{

            'footer-nav':nav
        }
    }
</script>

<style scoped>

</style>